<template>
  <div id="update-announce-container">
    <div class="app-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <el-page-header
            @back="goBack"
            content="修改公告信息"
          >
          </el-page-header>
        </div>
        <div class="from">
          <el-form
            :model="dataForm"
            :rules='dataRules'
            ref="dataForm"
          >
            <el-form-item
              label="标题"
              prop='title'
            >
              <el-input
                v-model.trim="dataForm.title"
                placeholder="请输入标题"
                clearable
                maxlength="50"
                show-word-limit
                @keyup.enter.native="announceFn()"
              ></el-input>

            </el-form-item>
            <el-form-item
              label="发布范围"
              prop="scope"
            >
              <el-radio-group v-model="dataForm.scope">
                <el-radio :label="4">暂不发布(草稿)</el-radio>
                <el-radio :label="3">全可见</el-radio>
                <el-radio :label="1">仅学生可见</el-radio>
                <el-radio :label="2">仅维修人员可见</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <!--  新增时输入 -->
        <!--富文本编辑器组件-->
        <quill-editor
          v-model="dataForm.content"
          :options="editorOption"
          ref="QuillEditor"
        >
        </quill-editor>

        <div class="btn">
          <el-button
            type="primary"
            @click="announceFn()"
          >修改公告</el-button>
        </div>

        <!-- 图片上传组件辅助，组件内添加v-show=“false”属性，把该组件隐藏起来。-->
        <upload-img
          ref="imageUrl"
          v-show='false'
          @uploadSuccessFn="uploadSuccessFn"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { goBack } from '@/utils'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getAnnounceInfoAPI, updateAnnounceAPI } from '@/api'

export default {
  name: 'announceAdd',
  components: {
    quillEditor
  },
  data () {
    return {
      dataForm: {
        content: '',
        title: '',
        scope: '4'
      },
      dataRules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            type: 'string',
            message: '标题要求1-50个数字',
            trigger: 'blur'
          }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 20000,
            type: 'string',
            message: '内容字符20000内',
            trigger: 'blur'
          }
        ]
      },
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: 'ordered' }, { list: 'bullet' }], // 列表
              [{ script: 'sub' }, { script: 'super' }], // 上下标
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
              ['image'] // 上传图片
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  // 调用element的图片上传组件
                  document.querySelector('.uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  created () {
    this.getAnnounceFn()
  },
  methods: {
    goBack,
    // 获取公告 -> 发送请求
    async getAnnounceFn () {
      try {
        const { success, code, data } = await getAnnounceInfoAPI(
          this.$route.params.id
        )
        if (success && code === 10000) {
          this.dataForm = data
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 修改公告 -> 点击事件
    async announceFn () {
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          try {
            const { success, code } = await updateAnnounceAPI(this.dataForm)
            if (success && code === 10000) {
              success && this.goBack()
            }
          } catch (err) {
            return console.dir(err)
          }
        }
      })
    },
    uploadSuccessFn (url) {
      // 获取富文本组件实例
      const quill = this.$refs.QuillEditor.quill
      // 获取光标所在位置
      const length = quill.getSelection().index
      // 插入图片，res为服务器返回的图片链接地址
      quill.insertEmbed(length, 'image', url)
      // 调整光标到最后
      quill.setSelection(length + 1)
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>

<style lang="less" scoped>
#edit_container img {
  width: 400px;
}
.btn {
  margin-top: 20px;
  text-align: right;
}
.from {
  margin-bottom: 20px;
}

::v-deep .ql-container img {
  max-width: 800px;
}
</style>
